<template>
  <div class="home" style="background-color: #f3f3f3;">

    <!-- 头部区域 -->
    <div class="bg-darkgreen">
      <a class="enter" @click="enterSys()">智慧化服务中心</a>
    </div>

    <home-header></home-header>

    <!-- 内容主体部分 -->
    <div id="main">
      <!-- Main content -->

      <!-- 展示轮播图 -->
      <div class="carousel">
        <!-- <span class="demonstration">默认 Hover 指示器触发</span> -->
        <el-carousel height="400px">
          <el-carousel-item v-for="item in newslist.slice(0, 6)" :key="item.value">
            <img class="carousel-img" :src="item.avatarUrl">
          </el-carousel-item>
        </el-carousel>
      </div>

      <div class="document shadow">
        <!-- 湖大要闻 -->
        <div class="news">
          <div class="news-bar">
            <h3 class="title-main">湖大要闻
              <span class="title-sub">&nbsp;HOT NEWS</span>
            </h3>
            <a style="cursor: pointer;" @click="morenewsclick()">
              <span class="icon-more">MORE>></span>
              <span class="more">更多新闻&nbsp;&nbsp;</span>
            </a>
            <!-- <a href="http://news.hubu.edu.cn/">
              <span class="icon-more">MORE>></span>
              <span class="more">更多新闻访问新闻网&nbsp;&nbsp;</span>
            </a> -->
          </div>

          <!-- content -->
          <div class="news-content" type="flex" justify="space-between" align="">
            <div class="news-carousel">
              <!-- <span class="demonstration">默认 Hover 指示器触发</span> -->
              <el-carousel height="256px">
                <el-carousel-item v-for="item in newslist.slice(0, 5)" :key="item.value">
                  <img class="carousel-img" style="width: 100%; height: 100%;" :src="item.avatarUrl">
                </el-carousel-item>
              </el-carousel>
            </div>

            <!-- cards area -->
            <div class="news-cards">
              <el-row :gutter="20" class="fence-contain el-flex">
                <el-col :span="12" v-for="item in newslist.slice(0, 2)" :key="item.value">
                  <el-row>
                    <el-col :span="6"><img :src="item.avatarUrl" class="card-img" @click="newsdetailclick(item.value)" style="cursor: pointer;"></el-col>
                    <el-col :span="18"><div class="desc-card shadow" @click="newsdetailclick(item.value)" style="cursor: pointer;">{{item.title}}</div></el-col>
                  </el-row>
                </el-col>
              </el-row>
              <el-row :gutter="20" class="fence-contain el-flex">
                <el-col :span="12" v-for="item in newslist.slice(2, 4)" :key="item.value">
                  <el-row>
                    <el-col :span="6"><img :src="item.avatarUrl" class="card-img" @click="newsdetailclick(item.value)" style="cursor: pointer;"></el-col>
                    <el-col :span="18"><div class="desc-card shadow" @click="newsdetailclick(item.value)" style="cursor: pointer;">{{item.title}}</div></el-col>
                  </el-row>
                </el-col>
              </el-row>
              <el-row :gutter="20" class="fence-contain el-flex">
                <el-col :span="12" v-for="item in newslist.slice(4, 6)" :key="item.value">
                  <el-row>
                    <el-col :span="6"><img :src="item.avatarUrl" class="card-img" @click="newsdetailclick(item.value)" style="cursor: pointer;"></el-col>
                    <el-col :span="18"><div class="desc-card shadow" @click="newsdetailclick(item.value)" style="cursor: pointer;">{{item.title}}</div></el-col>
                  </el-row>
                </el-col>
              </el-row>
            </div>
          </div>
        </div>

        <!-- 金牌教师 -->
        <div class="teacher">
          <div class="teacher-bar">
            <h3 class="title-main">金牌教师
              <span class="title-sub">&nbsp;TEACHERS</span>
            </h3>
            <a style="cursor: pointer;" @click="moreteacherclick()">
              <span class="icon-more">MORE>></span>
              <span class="more">更多教师&nbsp;&nbsp;</span>
            </a>
          </div>

          <!-- content -->
          <el-row class="teacher-content">
            <el-col :span="6" v-for="item in teacherlist.slice(0, 6)" :key="item.value">
              <div class="teacher-card" @click="teacherclick(item.value)" style="cursor: pointer;">
                <img :src="item.avatar_url" class="teacher-avatar">
                <div class="teacher-desc">
                <span class="teacher-name">{{item.name}}</span>
                <span>{{item.summary}}</span>
                </div>
              </div>
            </el-col>
          </el-row>
        </div>

        <!-- 精品课程 -->
        <div class="course">
          <!-- 标题部分 -->
          <div class="course-bar">
            <h3 class="title-main">精品课程
              <span class="title-sub">&nbsp;COURSES</span>
            </h3>
            <a style="cursor: pointer;" @click="morecourseclick()">
              <span class="icon-more">MORE>></span>
              <span class="more">更多课程&nbsp;&nbsp;</span>
            </a>
          </div>

          <!-- content -->
          <el-row :gutter="20" class="course-content">
            <el-col :span="6" v-for="item in courselist.slice(0, 4)" :key="item.value">
              <div class="course-desc" @click="courseclick(item.value)" style="cursor: pointer;">
                <img :src="item.avatar_url" class="course-img">
                <div class="course-name">{{item.course_name}}</div>
                <div class="course-detail">{{item.course_detail}}</div>
              </div>
            </el-col>
          </el-row>
        </div>

        <!-- 优秀学生 -->
        <!-- 由于和金牌教师极为相似，直接copy代码 -->
        <div class="student">
          <div class="student-bar">
            <h3 class="title-main">优秀学生
              <span class="title-sub">&nbsp;STUDENTS</span>
            </h3>
            <a style="cursor: pointer;" @click="morestudentclick()">
              <span class="icon-more">MORE>></span>
              <span class="more">更多优秀学生&nbsp;&nbsp;</span>
            </a>
          </div>

          <!-- content -->
          <el-row class="student-content">
            <el-col :span="6" v-for="item in studentlist.slice(0, 6)" :key="item.value">
              <div class="student-card" @click="studentclick(item.value)" style="cursor: pointer;">
                <img :src="item.avatar_url" class="student-avatar">
                <div class="student-desc">
                  <span class="student-name">{{item.name}}</span>
                  <span>{{item.summary}}</span>
                </div>
              </div>
            </el-col>
            
          </el-row>
        </div>
      </div>
    </div>

    <footer id="footer">
      <div class="foot-motto">
        <el-row :gutter="10" class="foot-icons">
          <el-col :span="3" :offset="0" class="icon">
            <a href="http://news.hubu.edu.cn/">
              <img src="../assets/imgs/home/home-link01.png">
              湖大新闻
            </a>
          </el-col>
          <el-col :span="3" :offset="0" class="icon">
            <a href="http://media.hubu.edu.cn/index/hddst.htm">
              <img src="../assets/imgs/home/home-link02.png">
              广播电视
            </a>
          </el-col>
          <el-col :span="3" :offset="0" class="icon">
            <a href="http://hubu.ihwrm.com/index/article/oldrelease.html">
              <img src="../assets/imgs/home/home-link03.png">
              电子校报
            </a>
          </el-col>
          <el-col :span="3" :offset="0" class="icon">
            <a href="http://mailbox.hubu.edu.cn/">
              <img src="../assets/imgs/home/home-link04.png">
              校务信箱
            </a>
          </el-col>
          <el-col :span="3" :offset="0">
          </el-col>
          <el-col :span="3" :offset="0" class="icon">
            <el-popover
              placement="top"
              width="150"
              trigger="hover">
              <img src="../assets/imgs/home/QR-site.png" style="transform: translate(20px, 0);">
              <a href="#" slot="reference">
                <img src="../assets/imgs/home/home-link05.png">
                湖大官网
              </a>
            </el-popover>
          </el-col>
          <el-col :span="3" :offset="0" class="icon">
            <el-popover
              placement="top"
              width="150"
              trigger="hover">
              <img src="../assets/imgs/home/QR-wx.png" style="transform: translate(20px, 0);">
              <a href="#" slot="reference">
                <img src="../assets/imgs/home/home-link06.png">
                湖大微信
              </a>
            </el-popover>
          </el-col>
          <el-col :span="3" :offset="0" class="icon">
            <el-popover
              placement="top"
              width="150"
              trigger="hover">
              <img src="../assets/imgs/home/QR-wb.png" style="transform: translate(20px, 0);">
              <a href="#" slot="reference">
                <img src="../assets/imgs/home/home-link07.png">
                湖大微博
              </a>
            </el-popover>
          </el-col>
        </el-row>
      </div>
    </footer>
  </div>
</template>

<script>
// @ is an alias to /src
import HomeHeader from '@/components/HomeHeader.vue'
export default {
  components: { HomeHeader },
  name: 'Home',
  data () {
    return {
      // carouselList: [
      //   {
      //     url: require('../assets/imgs/home/carousel_1.jpeg'),
      //     link: '/content1'
      //   }, {
      //     url: require('../assets/imgs/home/carousel_2.png'),
      //     link: '/content2'
      //   }, {
      //     url: require('../assets/imgs/home/carousel_3.jpeg'),
      //     link: '/content3'
      //   }, {
      //     url: require('../assets/imgs/home/carousel_4.jpeg'),
      //     link: '/content4'
      //   }, {
      //     url: require('../assets/imgs/home/carousel_5.png'),
      //     link: '/content5'
      //   }
      // ],
      newsCarousel: [{
        url: require('../assets/imgs/home/news01.jpeg')
      }, {
        url: require('../assets/imgs/home/news02.jpeg')
      }, {
        url: require('../assets/imgs/home/news03.jpeg')
      }],
      courselist: [],
      newslist: [],
      teacherlist: [],
      studentlist: []
    }
  },
  //执行方法
  created(){
    this.GetCourseList();
    this.GetNewsList();
    this.GetTeacherList();
    this.GetStudentList();
    // this.getCarouselList()
  },
  methods: {
    // 获取轮播图上的图片：就是拿取新闻上的前五个
    async getCarouselList () {
      this.carouselList = []
      const { data: res } = await this.$http.post('board/all/getNewsList?page=0&rows=10');
      if (res.state != true) return
      console.log(res)

      for (let i = 0; i < 5; i++) {
        var obj = {}
        obj.url = res.detail
      }
      res.detail.list.forEach(item => {
        var obj = {
          value: 0,
          avatarUrl: '',
          title: '',
        }
        obj.value=item.id
        obj.title=item.title
        obj.avatarUrl=item.avatarUrl
        this.newslist.push(obj)
      })
    },

    courseclick (id) {
      window.sessionStorage.setItem('chosenCourse', id)
      this.$router.push({ path: '/course' })
    },
    teacherclick (id) {
      window.sessionStorage.setItem('chosenTeacher', id)
      this.$router.push({ path: '/teacherdetail' })
    },
    studentclick (id) {
      window.sessionStorage.setItem('chosenStudent', id)
      this.$router.push({ path: '/studentdetail' })
    },
    newsdetailclick (id) {
      window.sessionStorage.setItem('chosenNews', id)
      this.$router.push({ path: '/newsdetail' })
    },

    async GetCourseList () {
      const { data: res } = await this.$http.post('course/all/getCourseList?page=0&rows=10')
      if (res.state != true) return
      console.log(res)

      res.detail.list.forEach(item => {
        var obj = {
          value: 0,
          course_name: '',
          course_detail: '',
          avatar_url: ''
        }
        obj.value = item.id
        obj.course_name = item.course_name
        obj.course_detail = item.course_detail
        obj.avatar_url = item.avatar_url
        this.courselist.push(obj)
      })
    },

    async GetNewsList () {
      const { data: res } = await this.$http.post('board/all/getNewsList?page=0&rows=10');
      if (res.state != true) return
      console.log(res)

      res.detail.list.forEach(item => {
        var obj = {
          value: 0,
          avatarUrl: '',
          title: '',
        }
        obj.value=item.id
        obj.title=item.title
        obj.avatarUrl=item.avatarUrl
        this.newslist.push(obj)
      })
    },

    async GetTeacherList () {
      const { data: res } = await this.$http.post('board/all/getGoodTeacherOrStudentList?identity=3&page=0&rows=10');
      if (res.state != true) return
      console.log(res)

      res.detail.list.forEach(item => {
        var obj = {
          value: 0,
          avatar_url: '',
          name: '',
          summary: ''
        }
        obj.value=item.id
        obj.avatar_url=item.avatar_url
        obj.name=item.name
        obj.summary=item.summary
        this.teacherlist.push(obj)
        })
    },

    async GetStudentList () {
      const { data: res } = await this.$http.post('board/all/getGoodTeacherOrStudentList?identity=2&page=0&rows=10');
      if (res.state != true) return
      console.log(res)

      res.detail.list.forEach(item => {
        var obj = {
          value: 0,
          avatar_url: '',
          name: '',
          summary: ''
        }
        obj.value=item.id
        obj.avatar_url=item.avatar_url
        obj.name=item.name
        obj.summary=item.summary
        this.studentlist.push(obj)
        })
    },

    morenewsclick () {
      this.$router.push({path: '/morenews'});
    },

    morecourseclick () {
      this.$router.push({path: '/morecourse'});
    },

    moreteacherclick () {
      this.$router.push({path: '/moreteacher'});
    },

    morestudentclick () {
      this.$router.push({path: '/morestudent'});
    },

    enterSys () {
      this.$router.push({ path: '/login' })
    }
  }
}
</script>

<style lang="less" scoped>
.bg-darkgreen {
  background-color: #2f4435;
  height: 35px;
  width: 100%;

  .enter {
    color: white;
    position: absolute;
    right: 0;
    transform: translate(-40%, 30%);
    font-weight: 300;
    font-size: 14px;
    cursor: pointer;
  }

  .enter:hover {
    color: cadetblue;
  }
}

// 主体内容部分
#main {
  padding: 0 6%;    // 可以通过这里的padding来更改两边的留白
  margin-bottom: 10px;
  background: url('../assets/imgs/home/sy-bg.jpeg') no-repeat bottom;

  .carousel {
    width: 100%;
    height: 400px;
    margin-top: 5px;

    .carousel-img {
      width: 100%;
      height: 100%;
    }
  }

  // 轮播图下方的主体内容部分
  .document {
    padding: 0 40px;
    background-color: #fff;

    // 湖大要闻
    .news {
      height: 300px;
      width: 100%;
      margin: 10px 0;

      .news-bar {
        height: 45px;
        border-bottom: 1px solid #e8e7e4;
        position: relative;

        .title-main {
          margin: 0;
          display: inline-block;
          font-size: 18px;
          font-weight: normal;
          line-height: 38px;
          border-bottom: 3px solid #007750;
        }
        .title-sub {
          font-family: "Courier New", Courier, monospace;
          color: #1a6c46;
          font-size: 14px;
        }

        .more {
          display: block;
          float: right;
          font-size: 14px;
          line-height: 44px;
          color: black;
        }
        .icon-more {
          display: block;
          float: right;
          color: #1a6c46;
          font-size: 14px;
          line-height: 44px;
        }
      }

      .news-content {
        margin: 10px 0;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .news-carousel {
          width: 395px;
          height: 256px;
        }

        .news-cards {
          width: 63%;
          // background-color: cornflowxwerblue;
          height: 256px;
          display: flex;
          flex-direction: column;
          justify-content: space-between;

          .fence-contain {
            height: 80px;
          }

          .card-img {
            width: 90px;
            height: 77px;
            border-radius: 3px;
          }

          .desc-card {
            height: 60px;
            width: 280px;
            padding: 8px;
            background-color: #fff;
            border-radius: 2px;
            font-size: 14px;
            // margin-left: 20px;
          }
        }
      }
    }

    // 金牌教师
    .teacher {
      height: 180px;
      width: 100%;
      margin-top: 30px;

      .teacher-bar {
        height: 45px;
        border-bottom: 1px solid #e8e7e4;
        position: relative;

        .title-main {
          margin: 0;
          display: inline-block;
          font-size: 18px;
          font-weight: normal;
          line-height: 38px;
          border-bottom: 3px solid #007750;

          .title-sub {
            font-family: "Courier New", Courier, monospace;
            color: #1a6c46;
            font-size: 14px;
          }
        }
        .more {
          display: block;
          float: right;
          font-size: 14px;
          line-height: 44px;
          color: black;
        }
        .icon-more {
          display: block;
          float: right;
          color: #1a6c46;
          font-size: 14px;
          line-height: 44px;
        }
      }

      .teacher-content {
        margin-top: 10px;
        width: 100%;
        height: 100px;
        display: flex;
        // justify-content: space-between;
        // justify-content: start;
        padding-left: 30px;
        // background-color: #fff;

        .teacher-card {
          height: 100%;
          // background-color: #ddd;
          display: flex;
          align-items: center;
          justify-content: space-between;

          .teacher-avatar {
            height: 70px;
            width: 70px;
            border-radius: 50%;
          }

          .teacher-desc {
            width: 80%;
            float: right;
            display: flex;
            margin-left: 10px;
            height: 60%;
            // background-color: #ddd;
            flex-direction: column;
            justify-content: space-around;
            align-items: stretch;

            .teacher-name {
              float: right;
              font-size: 14px;
              color: black;
              font-weight: 800;
            }

            span {
              display: block;
              height: 20px;
              float: right;
              font-size: 13px;
              color: #9C8F8E94;
            }
          }
        }
      }
    }

    // 精品课程
    .course {
      height: 400px;
      width: 100%;
      // margin: 10px 0;

      .course-bar {
        height: 45px;
        border-bottom: 1px solid #e8e7e4;
        position: relative;

        .title-main {
          margin: 0;
          display: inline-block;
          font-size: 18px;
          font-weight: normal;
          line-height: 38px;
          border-bottom: 3px solid #007750;
        }
        .title-sub {
          font-family: "Courier New", Courier, monospace;
          color: #1a6c46;
          font-size: 14px;
        }

        .more {
          display: block;
          float: right;
          font-size: 14px;
          line-height: 44px;
          color: black;
        }
        .icon-more {
          display: block;
          float: right;
          color: #1a6c46;
          font-size: 14px;
          line-height: 44px;
        }
      }

      .course-content {
        margin-top: 10px;

        .course-img {
          width: 240px;
          height: 300px;
          border-radius: 5px;
        }

        .course-desc {
          padding: 10px;

          .course-name {
            margin-bottom: 5px;
          }
          .course-detail {
            color: #8F8E94;
            font-size: 13px;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
          }
        }
      }
    }

    // 优秀学生
    .student {
      height: 180px;
      width: 100%;
      margin-top: 30px;

      .student-bar {
        height: 45px;
        border-bottom: 1px solid #e8e7e4;
        position: relative;

        .title-main {
          margin: 0;
          display: inline-block;
          font-size: 18px;
          font-weight: normal;
          line-height: 38px;
          border-bottom: 3px solid #007750;
        }
        .title-sub {
          font-family: "Courier New", Courier, monospace;
          color: #1a6c46;
          font-size: 14px;
        }

        .more {
          display: block;
          float: right;
          font-size: 14px;
          line-height: 44px;
          color: black;
        }
        .icon-more {
          display: block;
          float: right;
          color: #1a6c46;
          font-size: 14px;
          line-height: 44px;
        }
      }

      .student-content {
        margin-top: 10px;
        width: 100%;
        height: 100px;
        display: flex;
        justify-content: space-between;
        // background-color: #fff;

        .student-card {
          height: 100%;
          // background-color: #ddd;
          display: flex;
          align-items: center;
          justify-content: space-between;

          .student-avatar {
            height: 70px;
            width: 70px;
            border-radius: 50%;
          }

          .student-desc {
            width: 80%;
            float: right;
            display: flex;
            margin-left: 10px;
            height: 60%;
            flex-direction: column;
            justify-content: space-around;
            align-items: stretch;

            .student-name {
              float: right;
              font-size: 14px;
              color: black;
              font-weight: 800;
            }

            span {
              display: block;
              height: 20px;
              float: right;
              font-size: 13px;
              color: #9C8F8E94;
            }
          }
        }
      }
    }
  }
}

#footer {
  height: 110px;
  box-sizing: border-box;
  padding: 0 170px;
  border-radius: 2px;
  background: url('../assets/imgs/home/foot-bg.jpeg') no-repeat;

  .foot-motto {
    width: 650px;
    height: 100%;
    margin: 0 auto;
    padding-left: 450px;
    background: url('../assets/imgs/home/motto.png') no-repeat left top;

    .foot-icons {
      transform: translate(0, 30%);
      // background-color: #fff;
      height: 65%;
      display: flex;

      .icon {
        height: 100%;

        a {
          display: flex;
          flex-direction: column;
          align-items: center;
          font-size: 14px;
          color: #bed2c6;
          line-height: 32px;
        }
      }
    }
  }
}

</style>
